<template>
    <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <!-- <h1>{{ $store.state.num }}</h1> -->
        <h1>{{ num }}</h1>
        <h2>{{ score }}</h2>
        <button @click="add(10)">按钮+10</button>
        <button @click="getCityList">点击获取城市列表</button>
        <h2>{{ cityList }}</h2>

        <h2>{{ $store.getters.cityListLen }}</h2>
        <h2>{{ cityListLen }}城市的长度</h2>
        <h3>{{ $store.getters.filterCityList }}</h3>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
    name: 'Home',
    data() {
        return {
            n: 9,
        };
    },
    components: {
        HelloWorld,
    },
    // computed: mapState({
    //     //写法一:
    //     //  num: (state) => state.num,

    //     // 写法二: 'num' 解析成 `state => state.num`
    //     // num: 'num',

    //     // 写法三: 下面这种函数的写法只是为了拿到this
    //     num(state) {
    //         return state.num + this.n;
    //     },
    // }),

    // 写法四 映射 this.num 为 store.state.num
    // computed: mapState(['num', 'score']),

    // 写法五: 展开运算符的写法
    computed: {
        ...mapState({
            num: 'num',
            cityList: 'cityList',
            // num: (state) => state.num,
            score: (state) => state.score,
        }),
        // getters的写法一:
        // ...mapGetters({
        //     cityListLen: 'cityListLen',
        // }),

        // getter写法二:
        ...mapGetters(['cityListLen', 'filterCityList']),
    },

    // computed: {
    //     num() {
    //         return this.$store.state.num;
    //     },
    //     cityList() {
    //         return this.$store.state.cityList;
    //     },
    //     cityListLen() {
    //         return this.$store.getters.cityListLen;
    //     },
    // },
    methods: {
        // 写法一:
        // handleClick() {
        //     // this.$store.state.num = 100;
        //     this.$store.commit('add', 10);
        // },

        // mutations写法二:
        // ...mapMutations({
        //     handleClick: 'add',
        // }),

        // 写法三:
        ...mapMutations(['add']),

        // 写法一:
        // handleCityList() {
        //     // this.$store.dispatch('getCityList', payload);
        //     this.$store.dispatch('getCityList');
        // },

        // actions写法二:
        // ...mapActions({
        //     handleCityList: 'getCityList',
        // }),

        // actions写法三:
        ...mapActions(['getCityList']),
    },
    created () {
      console.log(this.formatDate);  
    },
};
</script>
